<template>
    <el-dialog v-model="dialogVisible" title="字典数据" width="500px">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
            <el-form-item label="字典标签" prop="dictLabel">
                <el-input v-model="form.dictLabel" placeholder="请输入字典标签"></el-input>
            </el-form-item>
            <el-form-item label="字典值" prop="dictValue">
                <el-input v-model="form.dictValue" placeholder="请输入字典值"></el-input>
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType">
                <el-select v-model="form.dictType" placeholder="请选择字典类型">
                    <el-option v-for="item in typeList" :key="item.dictType" :label="item.dictName" :value="item.dictType"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="字典排序" prop="dictSort">
                <el-input v-model="form.dictSort" placeholder="请输入字典排序"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="save">确认</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, toRefs } from "vue"
import { addDictData } from "@/api/system/sysdict.js"
import { ElMessage } from "element-plus"

export default {
    name: "addDictDetail",
    props: {
        typeList: {
            type: Array,
            default: () => []
        }
    },
    setup(props, { emit }) {
        const data = reactive({
            dialogVisible: false,
            form: {},
            formRef: null,
            rules: {
                dictLabel: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
                dictValue: [{ required: true, message: '请输入字典值', trigger: 'blur' }],
                dictType: [{ required: true, message: '请选择字典类型', trigger: 'blur' }],
                dictSort: [{ required: true, message: '请输入字典排序', trigger: 'blur' }],
            }
        })

        const openDialog = (e, val) => {
            data.dialogVisible = true
            data.form = { ...e }
            if(!e.dictCode){
                data.form.status = 1
                data.form.dictType = val
            }
            console.log(data.form, 'data.form');
        }

        const save = () => {
            data.formRef.validate((valid) => {
                if (valid) {
                    addDictData(data.form).then(res => {
                        if (res.code == 200) {
                            ElMessage.success('保存成功')
                            emit("rest")
                            data.dialogVisible = false
                        } else {
                            ElMessage.error(res.message)
                        }
                    })
                }
            })
        }

        return {
            ...toRefs(data),
            openDialog,
            save
        }
    }
};
</script>
<style lang="scss" scoped>

</style>